<!DOCTYPE html>
<html lang="zxx">

<!-- Head -->

<head>

    <title>Universe Signin Form Flat Responsive Widget Template :: W3layouts</title>

    <!-- Meta-Tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- style CSS -->
    <link rel="stylesheet" href="html/css/style.css" type="text/css" media="all">
    <!-- google fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<!-- //Head -->

<!-- Body -->

<body>

    <section class="main">
        <div class="logo text-center">
            <h1> <a href="index.html"> 网页聊天</a></h1>
        </div>
        <div class="content-w3ls text-center">
            <img src="html/images/admin.png" alt="" class="img-responsive">

            <div class="wthree-field">
                <input name="text1" id="text" type="text" value="" placeholder="用户名" required>
            </div>
            <div class="wthree-field">
                <input name="password" id="myInput" type="Password" placeholder="密码">
            </div>
            <div class="wthree-field">
                <button type="submit" class="btn">注册</button>
            </div>

        </div>
    </section>

    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script>
        let submitButton = document.querySelector(".btn");
        submitButton.onclick = function () {
            let username = document.querySelector('#text').value;
            let password = document.querySelector('#myInput').value;
            if(username==''||password==''){
                alert("输入不可为空");
                return ;
            }
            $.ajax({
                //请求
                url: '/register',
                type: 'post',
                data: {
                    username: username,
                    password: password
                },
                //响应
                success: function (body) {
                    //此处的body，相当于响应的user对象 json
                    //判断
                    console.log(body);
                    if (body && body.status > 0) {
                        //登录成功  
                        alert("注册成功");
                        //跳转到客户端主页(聊天页面)
                        location.assign('/login.html');
                    } else {
                        alert("用户名已被占用,请重新输入")
                        location.assign('/register.html');
                    }
                }
            });
        }
    </script>
</body>
<!-- //Body -->

</html>